<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="ppa">
    <h1>{{name}}</h1>
    <!-- <h1>{{age}}</h1> -->
    <!-- 可以做判断, 数学运算-->
    <!-- <h2>{{age*6 > age-5 ? '对' : '错'}}</h2> -->
    <!-- 字符串拼接 -->
    <!-- <span>{{'姓名:'+name}}</span> -->
    <!-- <p>{{SVIP && '普通会员'|| '超级会员'}}</p>
    <img :src="url" width="100px" height="100px">
    <div v-if="age => 28">年龄大了</div>
    <div v-else-if="age > 20 && age <= 27">黄金期</div>
    <div v-else-if="age <= 20">还小</div>
    <button @click="lianshow">
        {{ qiehuan ? '隐藏' : '显示' }} 文本
    </button>
    <div v-show="qiehuan">
        用来切换的不用来做别的,当切换状态是true的时候显示,.为false时隐藏
    </div>
    <p>当前状态：{{ qiehuan ? '显示' : '隐藏' }}</p> -->


    <!-- 下面是切换栏 -->
    <!-- <div class="tabs">
        <span class="tab" :class="{active:lan=== 'diyi'}" @click="lan='diyi'" style="color: red;">首页</span>
        <span class="tab" :class="{active:lan=== 'dier'}" @click="lan='dier'" style="color: rgb(77, 21, 182);">关于</span>
        <span class="tab" :class="{active:lan=== 'disan'}" @click="lan='disan'" style="color: red;">个人</span>
    </div>
    <div class="tab-content" v-show="lan === 'diyi'">
        <h3 style="color: aqua;">首页内容</h3>
        <p>这是张宇辉忏悔的地方 。</p>
    </div>
    <div class="tab-content" v-show="lan === 'dier'">
        <h3 style="color: rgb(212, 219, 15);">关于内容</h3>
        <p>这是张宇辉交罚款的地方 。</p>
    </div>
    <div class="tab-content" v-show="lan === 'disan'">
        <h3 style="color: rgb(17, 174, 19);">个人内容</h3>
        <p>这是张宇辉关禁闭的小黑屋。</p>
    </div> -->
    <!-- 上面是切换栏 -->

    <div class="task">
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>链接</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in task_arr" :key="item.id" :class="'oushu':index % 2 == 0 ,'jishu' : index % 2 ! = 0 ">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.url}}</td>
                    <td>{{item.sold}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <button @click="newaddShow = true">新增</button>
        <div class="add_box" v-show="newaddShow">
            名称: <input class="add_box_name" v-model="newitem.name" type="text" placeholder="请输入名称"><br>
            链接: <input class="add_box_url" v-model="newitem.url" type="text" placeholder="请输入网站链接"><br>
            描述: <input class="add_box_sold" v-model="newitem.sold" type="text" placeholder="请对此描述"><br>
            <button @click="save()">保存</button>
            <button @click="newaddShow=false" v-model="newaddShow">取消</button>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#ppa',
        data: {
            name: '友情链接',
            // age: 20,
            // SVIP: {
            //     '普通会员': true,
            //     '超级会员': false
            // },
            // url: './image.png',
            // qiehuan: true,

            // lan: 'diyi'//初始首页   切换栏
            task_arr: [{
                id: 0,
                name: '哔哩哔哩',
                url: 'http://www.bilibili.com/',
                sold: '哔哩哔哩官网'
            },
            {
                id: 1,
                name: '今日头条',
                url: 'http://www.toutiao.com/',
                sold: '今日头条:热榜新闻'
            },
            {
                id: 2,
                name: '百度',
                url: 'http://www.baidu.com/',
                sold: '百度搜索'
            },
            {
                id: 3,
                name: '新浪微博',
                url: 'http://www.weibo.com/',
                sold: '微博之夜'
            },
            {
                id: 4,
                name: '腾讯网',
                url: 'http://www.qq.com/',
                sold: '腾讯网tengxun'
            },],
            newitem: {
                name: '',
                url: '',
                sold: ''
            },
            newaddShow: false//添加框显示隐藏
        },

        methods: {
            // lianshow() {

            //     this.qiehuan = !this.qiehuan
            // },
            del(id) {
                this.task_arr = this.task_arr.filter(item => item.id !== id);
                return
            },
            save() {
                if (!this.newitem.name || !this.newitem.url) {
                    alert('名称或链接不能为空,请重新输入')
                }
                else {
                    this.task_arr.push({
                        id: this.task_arr.length,
                        name: this.newitem.name,
                        url: this.newitem.url,
                        sold: this.newitem.sold
                    })
                }
                this.newitem = { name: '', url: '', sold: '' };
                this.showAddBox = false;

            }
        }

    })
</script>